<template>
  <FullPageModal
    v-model:visible="visible"
    :get-container="getContainer"
    :mask="true"
    :body-style="{ padding: 0 }"
    :closable="false"
    :custom-footer="true"
  >
    <template #footer>
      <a-button @click="visible = false">{{ t("common.cancel") }}</a-button>
    </template>
    <div v-if="showConfiguration" class="h-full overflow-hidden">
      <VueConfiguration
        ref="configurationIns"
        :comp-data="{}"
        :data="data"
        @load-comp-data="onLoadCompData"
        @select="selectItem"
      />
    </div>
    <teleport to="body">
      <a-popover
        placement="right"
        title="磁悬浮水冷冷水机组 CH-1"
        :mouse-enter-delay="0"
        @visible-change="tipVisibleChange"
      >
        <template #content>
          <div class="text-color-secondary mb-1">冷冻水流量</div>
          <div>
            <span class="text-color-main align-middle">50.00</span>
            <span class="text-color-secondary align-middle">m³/h</span>
          </div>
        </template>
        <div
          v-show="showTip"
          class="absolute block z-1050 bg-white"
          style="opacity: 0.01"
          :style="{
            left: tipLeft - tipHandlerSize / 2 + 'px',
            top: tipTop - tipHandlerSize / 2 + 'px',
            width: tipHandlerSize + 'px',
            height: tipHandlerSize + 'px',
          }"
        >
        </div>
      </a-popover>
    </teleport>
    <a-drawer
      v-model:visible="detailDrawerVisible"
      title="磁悬浮水冷冷水机组"
      :mask="false"
      :width="600"
      :body-style="{ padding: 16 + 'px' }"
    >
      <div class="py-4.5 text-color-main font-semibold"> 基本信息 </div>
      <div class="flex flex-row items-center">
        <div class="rounded border border-solid border-color-split mr-4.5">
          <img src="../assets/configuration-detail.png" style="width: 250px" />
        </div>
        <div class="flex-1">
          <a-descriptions layout="vertical" :column="2" class="device-detail" :colon="false">
            <a-descriptions-item label="设备名称">磁悬浮水冷冷水机组</a-descriptions-item>
            <a-descriptions-item label="设备编码">CH-1</a-descriptions-item>
            <a-descriptions-item label="实际温度">7℃</a-descriptions-item>
            <a-descriptions-item label="状态"><span class="text-color-success">ON</span></a-descriptions-item>
            <a-descriptions-item label="蒸发器进水温度">12℃</a-descriptions-item>
            <a-descriptions-item label="蒸发器进出水温度"> 7℃ </a-descriptions-item>
            <a-descriptions-item label="冷凝器进水温度">27℃</a-descriptions-item>
            <a-descriptions-item label="冷凝器出水温度">32℃</a-descriptions-item>
          </a-descriptions>
        </div>
      </div>
      <div class="py-4.5 text-color-main font-semibold"> 告警信息 </div>
      <div class="mb-4.5 border-0 border-b border-solid border-color-split pb-4.5">
        <div class="flex flex-row items-center">
          <div class="mr-3">
            <a-tag color="red" class="!m-0">故障</a-tag>
          </div>
          <div class="flex-1 text-color-main">冷水机发生电气故障</div>
          <div class="text-color-secondary">16:00:21</div>
        </div>
        <div class="my-2">
          <span class="text-color-secondary">故障类型：</span>
          <span class="text-color-main">电气故障</span>
        </div>
        <div>
          <span class="text-color-secondary">故障描述：</span>
          <span class="text-color-main">冷冻水泵电路故障，市电断开、缺相、不稳定</span>
        </div>
      </div>
      <div class="border-0 border-b border-solid border-color-split pb-4.5">
        <div class="flex flex-row items-center">
          <div class="mr-3">
            <a-tag color="red" class="!m-0">故障</a-tag>
          </div>
          <div class="flex-1 text-color-main">冷水机发生电气故障</div>
          <div class="text-color-secondary">16:00:21</div>
        </div>
        <div class="my-2">
          <span class="text-color-secondary">故障类型：</span>
          <span class="text-color-main">电气故障</span>
        </div>
        <div>
          <span class="text-color-secondary">故障描述：</span>
          <span class="text-color-main">冷冻水泵电路故障，市电断开、缺相、不稳定</span>
        </div>
      </div>
    </a-drawer>
  </FullPageModal>
</template>
<script setup lang="ts">
import { nextTick, ref, watch } from "vue";
import { ConfigurationShowOptions } from "/@/types/components";
import { useI18n } from "/@/locales/useI18n";
import VueConfiguration from "/@/configuration/VueConfiguration.es.js";
import "/@/configuration/style.css";
// import sl3baseData from "/@/configuration/data/sl3base.json";
import { Console } from "console";

const props = defineProps<{
  options: ConfigurationShowOptions;
}>();

watch(
  () => props.options,
  () => {
    visible.value = true;
  }
);

function getContainer() {
  return document.body;
}

const { t } = useI18n();
const visible = ref(false);
const showConfiguration = ref(false);
let delayInter: number | undefined = void 0;

/**
 * 模拟数据开始
 */
const keys = ref<string[]>([]);
const data = ref<any>({});
function getRandom(min: number, max: number) {
  let r = Math.random() * (max - min);
  let re = Math.round(r + min);
  re = Math.max(Math.min(re, max), min);
  return re;
}
function createRandomData(keys: string[]) {
  const data = {};
  let value: number;
  keys.forEach((key) => {
    const arr = key.split("-");
    if (arr.length > 1) {
      let midValue = +arr[1];
      let target = Math.round(midValue / 10);
      if (target < 10) {
        target = 3;
      }
      value = getRandom(midValue - target, midValue + target);
    } else {
      value = getRandom(100, 200);
    }
    data[key] = value;
  });
  return data;
}
let inter: number | undefined = void 0;
function reloadData() {
  data.value = createRandomData(keys.value);
  startInter();
}
function startInter() {
  clearInterval(inter);
  inter = window.setInterval(() => {
    reloadData();
  }, 5000);
}
watch(visible, (v) => {
  clearTimeout(delayInter);
  if (v) {
    delayInter = window.setTimeout(() => {
      showConfiguration.value = true;
    }, 300);
  } else {
    showConfiguration.value = false;
    clearInterval(inter);
  }
});
const configurationIns = ref<any>();
function onLoadCompData() {
  if (configurationIns.value) {
    keys.value = configurationIns.value.getLabelValueKeys();
    reloadData();
  }
}
//select show tip
const showTip = ref(false);
const tipHandlerSize = 10;
const tipLeft = ref(0);
const tipTop = ref(0);
// const tipBtnEl = ref<HTMLButtonElement>();
function selectItem({ e, componentName }) {
  if (componentName) {
    if (componentName === "Valve" || componentName === "Meter") {
      detailDrawerVisible.value = false;
      showTip.value = true;
      tipLeft.value = e.pageX;
      tipTop.value = e.pageY;
    } else {
      detailDrawerVisible.value = true;
    }
  }
}
function tipVisibleChange(visible) {
  if (!visible) {
    showTip.value = false;
  }
}
const detailDrawerVisible = ref(false);
</script>
<style lang="less">
.device-detail {
  th.ant-descriptions-item {
    padding-bottom: 8px;
  }
  .ant-descriptions-item-label {
    color: @color-secondary;
  }
  .ant-descriptions-item-content {
    color: @color-main;
  }
}
</style>
